<template>
  <div class="wrapper">
        <div class="mapSearch">
          <el-input placeholder="请输入你要查找的关键词" v-model="userInput" id="tishikuang" clearable></el-input>
          <el-button type="primary" @click="biu">确定选址</el-button>
        </div>
        <div id="container">
        </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import request from "../../../utils/freshman";
import {ElMessage} from "element-plus";
window._AMapSecurityConfig = {
  //高德安全密钥
  securityJsCode: 'b4e8be61419ba0bb09ada7cdead80c3a'
}
const map = ref(null);
const autoOptions = {
  input: 'tishikuang'
};
let auto = null;
const userInput = ref('');
let placeSearch = null;
let searchHere = null;
onMounted(()=>{
  initMap();
})
const card=ref([]);
const biu = () => {
  if (searchHere) {
    map.value.setZoom(17); // 设置缩放级别为 17，根据需要调整
    map.value.setCenter([searchHere.location.lng, searchHere.location.lat]); // 设置地图中心点为选定地点的经纬度
    /*alert(`地址数据都在data里面this.searchHere，包括经纬度，
    以及其他各种地址信息，该有的都有，
    当poi搜索以后select(e){}方法里面的参数e就是地址信息，
    我把单独拿出来。地点名：${searchHere.name}`);*/
    const loginUser = sessionStorage.getItem("loginUser");
    if (loginUser) {
      const userobj = JSON.parse(loginUser)
      card.sid = userobj.sid;
      card.sname=userobj.sname;
    }
    console.log(card.value)
    request({
      url:'/card/update',
      method:'get',
      params:{
        sid:card.sid,
        user:card.sname,
        location:card.location,
      }
    }).then(req=>{
      if (req.data.errorCode == 200){
        ElMessage.success("您已完成打卡！")
      }
    })

  }
};

const initMap = () => {
  AMapLoader.load({
    key: "1fdb814e67c4a3912f6b9355d7275273",
    version: "2.0",
    plugins: [
      'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType',
      'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'
    ],
  }).then((AMap) => {
    map.value = new AMap.Map("container", {
      viewMode: "3D",
      zoom: 17,
      center: [117.007614, 39.1411],
    });
    map.value.addControl(new AMap.Scale());
    map.value.addControl(new AMap.ToolBar());
    map.value.addControl(new AMap.HawkEye());
    map.value.addControl(new AMap.MapType());
    map.value.addControl(new AMap.Geolocation());
    auto = new AMap.AutoComplete(autoOptions);
    placeSearch = new AMap.PlaceSearch({
      map: map.value
    });
    auto.on('select', select);
  }).catch(e => {
    console.log(e);
  });
};

const select = (e) => {
  placeSearch.setCity(e.poi.adcode);
  placeSearch.search(e.poi.name);
  map.value.setZoom(10, true);
  searchHere = e.poi;
  alert(`选择地点: ${searchHere.name}`);
  card.location=searchHere.name;
};


</script>

<style scoped>
.mapSearch {
  display: flex;
  margin-bottom: 40px;
}
.wrapper{
  margin: 40px ;
  width: 100%;
  height: 500px;
}
#container{
  width: 100%;
  height: 580px;
}
#tishikuang {
  margin-bottom: 200px;
  display: block;
}
</style>
